<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <!-- Vue 组件的模板在某些情况下会受到 HTML 的限制，比如<table>内规定只允许是〈位〉、<td>、
             <th>等这些表格元素，所以在<table>内直接使用组件是无效的 。 属性来挂载组件 ， 示例代码如下 :
            这种情况下，可以使用特殊的 is属性来挂载组件-->
        <table>
            <tbody is="my-component">
            </tbody>
        </table>
        
    </div>

    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        // 除了 template选项外，组件中还可以像 Vue实例那样使用其他的选项，
        //比如 data、 computed、 methods 等。但是在使用 data 时， 和实例稍有区别， 
        //data 必须是函数，然后将数据 return 出去，
        Vue.component('my-component',{
            template: '<div>这里是组件的内容：{{message}}</div>',
            data() {
                return {
                    message: '组件内容'
                }
            },
        });
    
        // 变量app表示一个vue实例
        var app = new Vue({
            el: '#app', //用于指定一个页面中存在的Dom元素来挂载Vue示例。挂载成功后可以使用app.$el来访问该元素
            data: {
                
            }
        })
    </script>
</body>
</html>